<template>
    <div class="callhistory">      
        <Table  highlight-row size="small" :data="callHistoryData" :columns="columns14"></Table>
        <Page v-if="totalNumber>pageSize" style="margin-top:20px;" :total="totalNumber" :page-size="pageSize" size="small" show-elevator show-total @on-change="chagePage"></Page>
        <audio id="myaudio">
            HTML5 audio not supported
          </audio>
          <!-- <Icon type="play" @click="playAudio"></Icon>
          <Icon type="pause"></Icon> -->
    </div>
</template>
<script>
    import {
        mapGetters
    } from 'vuex'
    import expandRow from './tableExpand.vue'
    import caseService from 'service/caseService.js'
    import callService from 'service/callService.js'
    import domAction from '@/libs/dom.js'
    export default {
        name: 'callHistory',
        props: {
            studentId: [String, Number]
        },
        computed: {
            ...mapGetters({
                roleList: 'roleList',
                loginUserInfo: 'loginUserInfo'
            }),
            listenRole() {
                let listenRole = this.roleList.find((item) => {
                    return item === 'LISTEN'
                })
                return listenRole
            }
        },
        watch: {
            '$route' (to) {
                if (to.path.indexOf('/voicecall') > -1) {
                    this.getRecordCallList({})
                }

            }
        },
        data() {
            return {
                columns14: [{
                    type: 'expand',
                    width: 100,
                    title: '收起/展开',
                    render: (h, params) => {
                        let caseData = params.row.cases ? params.row.cases : []
                        return h(expandRow, {
                            props: {
                                cases: caseData,
                                rowData: params.row
                            }
                        })
                    }
                }, {
                    title: 'CallID',
                    key: 'connID',
                    width: 150
                }, {
                    title: '服务开始时间',
                    key: 'answerTime',
                    width: 160
                }, {
                    title: '服务结束时间',
                    key: 'endTime',
                    width: 160
                }, {
                    title: '处理人',
                    key: 'agentName'
                }, {
                    title: '处理组',
                    key: 'handlerGroupName'
                }, {
                    title: '操作',
                    align: 'center',
                    key: 'append',
                    render: (h, params) => {
                        if (Array.isArray(params.row.cases) && params.row.cases.length == 0) {
                            return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {

                                        let connID = params.row.connID
                                        let data = {
                                            'type': 'APPEND',
                                            'connId': connID
                                        }

                                        this.$emit('appendCase', data);
                                        // eventBus.$emit('createSummary', data)


                                        //  return false;
                                    }
                                }
                            }, '补单');
                        } else {
                            return '----'
                        }
                    }
                }, {
                    title: '录音',
                    key: 'voice',
                    render: (h, params) => {
                        if (this.listenRole) {

                            return h('Button', {
                                props: {
                                    size: 'small'
                                }
                            }, [
                                h('span', {
                                    style: {
                                        marginRight: '5px'

                                    },
                                    on: {
                                        click: async(event) => {

                                            let targetDom = event.target
                                                // let index = params.index

                                            // let targetDomParent = document.getElementById('callHistoryContainer').getElementsByTagName('tr')[index]
                                            // console.log(targetDomParent)
                                            // let targetDomParentSiblings = domAction.siblingsDom(targetDomParent)
                                            // console.log(targetDomParentSiblings)
                                            // document.getElementById('callHistoryContainer').getElementsByTagName('tr')[index].siblingsDom.getElementsByTagName('')

                                            let data = {
                                                'callUUID': params.row.callUUID,
                                                'extNumber': params.row.extNumber
                                            }

                                            let jsondata = await this.getCallVoiceUrl(data)
                                            if (jsondata.recordingUrl) {
                                                let recordingUrl = jsondata.recordingUrl

                                                let oAudio = document.querySelector('#myaudio')
                                                if (targetDom.innerText == '播放录音') {
                                                    targetDom.innerText = '暂停录音'
                                                    oAudio.src = recordingUrl
                                                    oAudio.play()
                                                } else {
                                                    targetDom.innerText = '播放录音'
                                                    oAudio.pause();
                                                }
                                            } else {
                                                this.$Message.warning('没有录音');
                                                return false
                                            }
                                        }
                                    }
                                }, '播放录音')
                            ]);

                        } else {
                            return '---'
                        }
                    }
                }],
                callHistoryData: [],
                totalNumber: '',
                pageSize: 5

            }
        },
        beforeDestroy() {

            console.log('-----beforeDestroy-----')
                // eventBus.$off('createSummary')

        },
        created() {
            this.getRecordCallList({})
            let vm = this
            eventBus.$on('refreshCallHistory', function() {
                vm.getRecordCallList({})

            })

        },
        methods: {
            async getRecordCallList(data) {
                let customerID = this.studentId ? this.studentId : ''
                let page = data.page ? data.page : 0
                let count = data.count ? data.count : this.pageSize
                let jsondata = await callService.getRecordCallList({
                    'customerID': customerID,
                    "page": page,
                    "count": count
                })
                let callHistoryData = []
                jsondata.content.forEach((item, index) => {
                        caseService.getCaseListByCallId({
                            "connId": item.connID
                        }).then((data) => {
                            item.cases = data.data
                            callHistoryData.push(item)
                        })
                    })
                    // console.log(callHistoryData)
                this.callHistoryData = callHistoryData
                this.totalNumber = jsondata.totalElements

            },
            async getCallVoiceUrl(data) {
                let jsondata = await callService.getRecordVoiceUrlByCallIDAndExtNum(data)
                return jsondata
            },
            async getCaseListByCallId(data) {
                //"callId": params.row.connID
                let jsondata = await caseService.getCaseListByCallId(data)
                if (jsondata.state) {
                    return jsondata.data
                }
            },
            async chagePage(page) {
                page = parseInt(page - 1)
                await this.getRecordCallList({
                    'page': page,
                    'count': this.pageSize
                })
            }
        }
    }
</script>
<style>
    #myaudio {
        /* display: none; */
    }
    
    .callhistory .ivu-table-cell-expand i {
        font-size: 22px;
        color: #f50;
        font-weight: 600;
    }
</style>